---
metaTitle: Scales
metaDescription: See all accessible color scales that Radix Colors provides.
---

# Scales

<Description>An overview of all Radix Colors scales.</Description>

#### Gray

{

<ColorScaleGroup>
	<ColorScale label="Gray" name="gray" />
	<ColorScale label="Gray Alpha" name="grayA" />
	<ColorScale label="Gray Dark" name="grayDark" />
	<ColorScale label="Gray Dark Alpha" name="grayDarkA" />
</ColorScaleGroup>

}

#### Mauve

{

<ColorScaleGroup>
	<ColorScale label="Mauve" name="mauve" />
	<ColorScale label="Mauve Alpha" name="mauveA" />
	<ColorScale label="Mauve Dark" name="mauveDark" />
	<ColorScale label="Mauve Dark Alpha" name="mauveDarkA" />
</ColorScaleGroup>
}

#### Slate

{

<ColorScaleGroup>
	<ColorScale label="Slate" name="slate" />
	<ColorScale label="Slate Alpha" name="slateA" />
	<ColorScale label="Slate Dark" name="slateDark" />
	<ColorScale label="Slate Dark Alpha" name="slateDarkA" />
</ColorScaleGroup>

}

#### Sage

{

<ColorScaleGroup>
	<ColorScale label="Sage" name="sage" />
	<ColorScale label="Sage Alpha" name="sageA" />
	<ColorScale label="Sage Dark" name="sageDark" />
	<ColorScale label="Sage Dark Alpha" name="sageDarkA" />
</ColorScaleGroup>

}

#### Olive

{

<ColorScaleGroup>
	<ColorScale label="Olive" name="olive" />
	<ColorScale label="Olive Alpha" name="oliveA" />
	<ColorScale label="Olive Dark" name="oliveDark" />
	<ColorScale label="Olive Dark Alpha" name="oliveDarkA" />
</ColorScaleGroup>
}

#### Sand

{

<ColorScaleGroup>
	<ColorScale label="Sand" name="sand" />
	<ColorScale label="Sand Alpha" name="sandA" />
	<ColorScale label="Sand Dark" name="sandDark" />
	<ColorScale label="Sand Dark Alpha" name="sandDarkA" />
</ColorScaleGroup>

}

#### Gold

{

<ColorScaleGroup>
	<ColorScale label="Gold" name="gold" />
	<ColorScale label="Gold Alpha" name="goldA" />
	<ColorScale label="Gold Dark" name="goldDark" />
	<ColorScale label="Gold Dark Alpha" name="goldDarkA" />
</ColorScaleGroup>

}

#### Bronze

{

<ColorScaleGroup>
	<ColorScale label="Bronze" name="bronze" />
	<ColorScale label="Bronze Alpha" name="bronzeA" />
	<ColorScale label="Bronze Dark" name="bronzeDark" />
	<ColorScale label="Bronze Dark Alpha" name="bronzeDarkA" />
</ColorScaleGroup>

}

#### Brown

{

<ColorScaleGroup>
	<ColorScale label="Brown" name="brown" />
	<ColorScale label="Brown Alpha" name="brownA" />
	<ColorScale label="Brown Dark" name="brownDark" />
	<ColorScale label="Brown Dark Alpha" name="brownDarkA" />
</ColorScaleGroup>

}

#### Yellow

{

<ColorScaleGroup>
	<ColorScale label="Yellow" name="yellow" />
	<ColorScale label="Yellow Alpha" name="yellowA" />
	<ColorScale label="Yellow Dark" name="yellowDark" />
	<ColorScale label="Yellow Dark Alpha" name="yellowDarkA" />
</ColorScaleGroup>

}

#### Amber

{

<ColorScaleGroup>
	<ColorScale label="Amber" name="amber" />
	<ColorScale label="Amber Alpha" name="amberA" />
	<ColorScale label="Amber Dark" name="amberDark" />
	<ColorScale label="Amber Dark Alpha" name="amberDarkA" />
</ColorScaleGroup>

}

#### Orange

{

<ColorScaleGroup>
	<ColorScale label="Orange" name="orange" />
	<ColorScale label="Orange Alpha" name="orangeA" />
	<ColorScale label="Orange Dark" name="orangeDark" />
	<ColorScale label="Orange Dark Alpha" name="orangeDarkA" />
</ColorScaleGroup>

}

#### Tomato

{

<ColorScaleGroup>
	<ColorScale label="Tomato" name="tomato" />
	<ColorScale label="Tomato Alpha" name="tomatoA" />
	<ColorScale label="Tomato Dark" name="tomatoDark" />
	<ColorScale label="Tomato Dark Alpha" name="tomatoDarkA" />
</ColorScaleGroup>

}

#### Red

{

<ColorScaleGroup>
	<ColorScale label="Red" name="red" />
	<ColorScale label="Red Alpha" name="redA" />
	<ColorScale label="Red Dark" name="redDark" />
	<ColorScale label="Red Dark Alpha" name="redDarkA" />
</ColorScaleGroup>

}

#### Ruby

{

<ColorScaleGroup>
	<ColorScale label="Ruby" name="ruby" />
	<ColorScale label="Ruby Alpha" name="rubyA" />
	<ColorScale label="Ruby Dark" name="rubyDark" />
	<ColorScale label="Ruby Dark Alpha" name="rubyDarkA" />
</ColorScaleGroup>

}

#### Crimson

{

<ColorScaleGroup>
	<ColorScale label="Crimson" name="crimson" />
	<ColorScale label="Crimson Alpha" name="crimsonA" />
	<ColorScale label="Crimson Dark" name="crimsonDark" />
	<ColorScale label="Crimson Dark Alpha" name="crimsonDarkA" />
</ColorScaleGroup>
}

#### Pink

{

<ColorScaleGroup>
	<ColorScale label="Pink" name="pink" />
	<ColorScale label="Pink Alpha" name="pinkA" />
	<ColorScale label="Pink Dark" name="pinkDark" />
	<ColorScale label="Pink Dark Alpha" name="pinkDarkA" />
</ColorScaleGroup>

}

#### Plum

{

<ColorScaleGroup>
	<ColorScale label="Plum" name="plum" />
	<ColorScale label="Plum Alpha" name="plumA" />
	<ColorScale label="Plum Dark" name="plumDark" />
	<ColorScale label="Plum Dark Alpha" name="plumDarkA" />
</ColorScaleGroup>

}

#### Purple

{

<ColorScaleGroup>
	<ColorScale label="Purple" name="purple" />
	<ColorScale label="Purple Alpha" name="purpleA" />
	<ColorScale label="Purple Dark" name="purpleDark" />
	<ColorScale label="Purple Dark Alpha" name="purpleDarkA" />
</ColorScaleGroup>
}

#### Violet

{

<ColorScaleGroup>
	<ColorScale label="Violet" name="violet" />
	<ColorScale label="Violet Alpha" name="violetA" />
	<ColorScale label="Violet Dark" name="violetDark" />
	<ColorScale label="Violet Dark Alpha" name="violetDarkA" />
</ColorScaleGroup>
}

#### Iris

{

<ColorScaleGroup>
	<ColorScale label="Iris" name="iris" />
	<ColorScale label="Iris Alpha" name="irisA" />
	<ColorScale label="Iris Dark" name="irisDark" />
	<ColorScale label="Iris Dark Alpha" name="irisDarkA" />
</ColorScaleGroup>
}

#### Indigo

{

<ColorScaleGroup>
	<ColorScale label="Indigo" name="indigo" />
	<ColorScale label="Indigo Alpha" name="indigoA" />
	<ColorScale label="Indigo Dark" name="indigoDark" />
	<ColorScale label="Indigo Dark Alpha" name="indigoDarkA" />
</ColorScaleGroup>
}

#### Blue

{

<ColorScaleGroup>
	<ColorScale label="Blue" name="blue" />
	<ColorScale label="Blue Alpha" name="blueA" />
	<ColorScale label="Blue Dark" name="blueDark" />
	<ColorScale label="Blue Dark Alpha" name="blueDarkA" />
</ColorScaleGroup>
}

#### Cyan

{

<ColorScaleGroup>
	<ColorScale label="Cyan" name="cyan" />
	<ColorScale label="Cyan Alpha" name="cyanA" />
	<ColorScale label="Cyan Dark" name="cyanDark" />
	<ColorScale label="Cyan Dark Alpha" name="cyanDarkA" />
</ColorScaleGroup>
}

#### Teal

{

<ColorScaleGroup>
	<ColorScale label="Teal" name="teal" />
	<ColorScale label="Teal Alpha" name="tealA" />
	<ColorScale label="Teal Dark" name="tealDark" />
	<ColorScale label="Teal Dark Alpha" name="tealDarkA" />
</ColorScaleGroup>

}

#### Jade

{

<ColorScaleGroup>
	<ColorScale label="Jade" name="jade" />
	<ColorScale label="Jade Alpha" name="jadeA" />
	<ColorScale label="Jade Dark" name="jadeDark" />
	<ColorScale label="Jade Dark Alpha" name="jadeDarkA" />
</ColorScaleGroup>

}

#### Green

{

<ColorScaleGroup>
	<ColorScale label="Green" name="green" />
	<ColorScale label="Green Alpha" name="greenA" />
	<ColorScale label="Green Dark" name="greenDark" />
	<ColorScale label="Green Dark Alpha" name="greenDarkA" />
</ColorScaleGroup>

}

#### Grass

{

<ColorScaleGroup>
	<ColorScale label="Grass" name="grass" />
	<ColorScale label="Grass Alpha" name="grassA" />
	<ColorScale label="Grass Dark" name="grassDark" />
	<ColorScale label="Grass Dark Alpha" name="grassDarkA" />
</ColorScaleGroup>
}

#### Lime

{

<ColorScaleGroup>
	<ColorScale label="Lime" name="lime" />
	<ColorScale label="Lime Alpha" name="limeA" />
	<ColorScale label="Lime Dark" name="limeDark" />
	<ColorScale label="Lime Dark Alpha" name="limeDarkA" />
</ColorScaleGroup>
}

#### Mint

{

<ColorScaleGroup>
	<ColorScale label="Mint" name="mint" />
	<ColorScale label="Mint Alpha" name="mintA" />
	<ColorScale label="Mint Dark" name="mintDark" />
	<ColorScale label="Mint Dark Alpha" name="mintDarkA" />
</ColorScaleGroup>

}

#### Sky

{

<ColorScaleGroup>
	<ColorScale label="Sky" name="sky" />
	<ColorScale label="Sky Alpha" name="skyA" />
	<ColorScale label="Sky Dark" name="skyDark" />
	<ColorScale label="Sky Dark Alpha" name="skyDarkA" />
</ColorScaleGroup>

}

<br />

---

#### Overlays

These scales are designed for overlays and don’t change across light and dark
theme.

<br />
{

<ColorScaleGroup>
	<ColorScale label="Black Alpha" name="blackA" />
	<ColorScale label="White Alpha" name="whiteA" />
</ColorScaleGroup>

}

<br />
<br />
